<template>
	<view>
		<navBar title="发布页"></navBar>

		<view class="form-box">
			<u--form labelWidth="80" labelPosition="top" :model="form" :rules="rules" ref="form"
				:labelStyle="{paddingLeft: '5px'}">
				<!-- 文章标题 -->
				<u-form-item prop="title" label="文章标题" borderBottom required>
					<u--input v-model="form.title" border="none" placeholder="请输入文章标题"
						placeholderStyle="font-size: 18px; opacity: 0.5"></u--input>
				</u-form-item>
				<!-- 文章封面 -->
				<u-form-item prop="cover" label="文章封面" borderBottom required>
					<u-upload :fileList="fileList" @afterRead="afterRead" name="1">
					</u-upload>
				</u-form-item>
				<!-- 文章分类 -->
				<u-form-item prop="classifyArr" label="文章分类" borderBottom required>
					<view>
						<u-picker :show="show" :columns="columns" @confirm="confirm" @cancel="cancel"></u-picker>
						<input :value="classifyName" @click="show = true" placeholder="请选择分类" border="none"
							disabled></input>
					</view>
				</u-form-item>
				<!-- 文章内容 -->
				<u-form-item prop="content" label="文章内容" borderBottom required>
					<jin-edit class="editor" height="50vh" @editOk="publish" :header="{'x-token': userInfo.token}"
						uploadFileUrl="http://eggblog.bluej.cn/api/imgUpload"></jin-edit>
				</u-form-item>
			</u--form>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'

	import {
		getClassify,
		createBlog
	} from '@/config/api.js'

	export default {
		data() {
			return {
				form: {
					title: "",
					content: "",
					cover: "",
					classifyArr: null,
					projectId: 170
				},
				rules: {
					title: {
						required: true,
						message: "请输入文章标题",
						trigger: ['change', 'blur'],
					},
					content: {
						required: true,
						message: "请输入文章内容",
						trigger: ['change', 'blur'],
					},
					cover: {
						required: true,
						message: "请上传文章封面",
						trigger: ['change'],
					},
					classifyArr: {
						type: 'array',
						required: true,
						message: "请选择文章分类",
						trigger: ['change'],
					}
				},
				fileList: [],
				show: false,
				columns: [],
				classifyList: [],
				classifyName: ""
			}
		},
		onLoad() {
			//	如果用户没有登陆，则跳转到登陆页
			if (!this.userInfo) {
				uni.redirectTo({
					url: '/subpages/login/login'
				})
			} else {
				this.initClassify()
			}
		},
		methods: {
			async afterRead(data) {
				const imgStatus = {
					status: 'uploading',
					message: '上传中'
				}
				this.fileList.push(imgStatus)

				uni.uploadFile({
					url: 'https://eggblog.bluej.cn/api/imgUpload',
					filePath: data.file.url,
					name: 'file',
					header: {
						"x-token": this.userInfo.token
					},
					success: res => {
						const fileData = JSON.parse(res.data)

						this.$set(this.fileList, 0, {
							status: 'success',
							url: fileData.data[0]
						})
						//	将图片上传后的URL保存到表单信息中
						this.form.cover = fileData.data[0]
					}
				})
			},
			async initClassify() {
				const classify = await getClassify()
				//	将分类数据进行保存
				//	利用 map 函数，将分类里的分类名称，整合为一个数组返回出来
				this.classifyList = classify.data.rows
				const arr = this.classifyList.map(item => item.classifyName)
				this.columns.push(arr)
			},
			confirm(data) {
				console.log(data);
				//	将分类 ID 保存到表单信息中
				this.form.classifyArr = [this.classifyList[data.indexs[0]].id]
				//	将分类名称展示到 input 框中
				this.classifyName = data.value[0]
				//	关闭弹出层
				this.show = false
			},
			cancel() {
				this.show = false
			},
			async publish(data) {
				uni.showLoading({
					title: "发布中..."
				})

				this.form.content = data.html

				try {
					this.$refs.form.validate()
					const createRes = await createBlog(this.form, this.userInfo.token)

					uni.showToast({
						title: "发布成功"
					})

					//	清空数据，并跳往首页
					setTimeout(() => {
						this.form = {
							title: "",
							content: "",
							cover: "",
							classifyArr: null,
							projectId: 151
						},
						this.classifyName ='',
						this.fileList = []
						uni.switchTab({
							url: "/pages/index/index",
						})
					}, 2000)
				} catch (e) {
					//TODO handle the exception
				}
			}
		},
		computed: {
			...mapState(['userInfo'])
		}
	}
</script>

<style lang="scss">
	.form-box {
		padding: 20px;
	}

	.editor {
		width: 90vw;
	}

	::v-deep .tool {
		z-index: 999;
		position: fixed;
		left: 0;
		bottom: 0;
		background: #fff;
	}
</style>
